<template>
  <form @submit.prevent="handleSubmit" class="register-form">
    <div class="form-group">
      <label for="username">用户名</label>
      <input
        id="username"
        v-model="formData.username"
        type="text"
        required
        placeholder="请输入用户名"
      >
    </div>
    <div class="form-group">
      <label for="email">邮箱</label>
      <input
        id="email"
        v-model="formData.email"
        type="email"
        required
        placeholder="请输入邮箱"
      >
    </div>
    <div class="form-group">
      <label for="account">账号</label>
      <input
        id="account"
        v-model="formData.account"
        type="text"
        required
        placeholder="请输入账号"
      >
    </div>
    <div class="form-group">
      <label for="password">密码</label>
      <input
        id="password"
        v-model="formData.password"
        type="password"
        required
        placeholder="请输入密码"
      >
    </div>
    <div class="agreement">
      <label>
        <input type="checkbox" v-model="formData.agreeTerms">
        我已阅读并同意<a href="#" class="terms-link">服务条款</a>
      </label>
    </div>
    <button
      type="submit"
      class="register-btn"
      :disabled="!formData.agreeTerms"
    >
      注册
    </button>
    <div class="login-link">
      已有账号？<router-link to="/login">立即登录</router-link>
    </div>
  </form>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import request from '../utils/request'

const router = useRouter()

const formData = ref({
  username: '',
  email: '',
  account: '',
  password: '',
  agreeTerms: false
})

const handleSubmit = async () => {
  if (!formData.value.agreeTerms) {
    alert('请同意服务条款')
    return
  }

  try {
    const response = await request.post('/users/register', {
      username: formData.value.username,
      email: formData.value.email,
      account: formData.value.account,
      password: formData.value.password
    })
    
    if (response.id) {
      alert('注册成功！请登录')
      router.push('/login')
    }
  } catch (error) {
    console.error('注册失败:', error.response?.data?.error || error.message)
    alert(error.response?.data?.error || '注册失败，请重试')
  }
}
</script>

<style scoped>
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-color);
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
}

.form-group input:focus {
  border-color: var(--primary-color);
  outline: none;
}

.agreement {
  margin-bottom: 20px;
  color: var(--text-light);
  font-size: 14px;
}

.terms-link {
  color: var(--primary-color);
  text-decoration: none;
}

.terms-link:hover {
  text-decoration: underline;
}

.register-btn {
  width: 100%;
  padding: 12px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 16px;
}

.register-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.register-btn:not(:disabled):hover {
  background: #0052a3;
}

.login-link {
  text-align: center;
  color: var(--text-light);
  font-size: 14px;
}

.login-link a {
  color: var(--primary-color);
  text-decoration: none;
}

.login-link a:hover {
  text-decoration: underline;
}
</style> 